﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
            <div class="flex-row padding-tb-8">
                <el-form :inline="true" :model="query" size="small" class="demo-form-inline margin-left-8 flex-row-fill">
                    <el-form-item label="品牌">
                        <el-select v-model="query.bid" placeholder="请选择品牌" clearable>
                            <el-option v-for="(item,index) in eoModelList" :label="item.text" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="适用车型">
                        <el-select v-model="query.eoApplications" placeholder="请选择适用车型" clearable>
                            <el-option v-for="(item,index) in carList" :label="item.cName" :value="item.cName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="loadList" icon="el-icon-search">查询</el-button>
                        <el-button type="primary" v-on:click="add" icon="el-icon-plus" plain>新增</el-button>
                        <el-button class="margin-left-10" type="primary" size="small" icon="fa fa-file-excel-o"
                                   v-on:click="exportafter" v-if="tableData.length>0">导出</el-button>
                    </el-form-item>
                </el-form>
                <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange"
                               :current-page="query.pageIndex" :page-sizes="[15,30,50,100]" :page-size="query.pageSize"
                               layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
            </div>
            <div class="flex-column-fill hidden">
                <vxe-table :data="tableData" ref="vxeTable" stripe border style="width:100%;" height="100%" size="small" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}" show-header-overflow show-overflow>
                    <vxe-column field="eoBrand" min-width="150" align="center" fixed="left">
                        <template #header="d">
                            <div class="flex-row" style="justify-content: center;">
                                <!-- <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" circle
                v-on:click="add()"></el-button> -->
                                <span class="margin-left-6 margin-right-6">机油品牌</span>
                                <!-- <el-input style="width:150px; margin-right:4px;" placeholder="检索" size="small"
                v-model.trim="search"></el-input> -->
                            </div>
                        </template>
                    </vxe-column>
                    <vxe-column field="eoModel" title="机油型号" min-width="280" align="center">
                        <template #default="d">
                            <span>{{d.row.eoModel}}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="eoCapacity" title="容量(/L)" width="150" align="center">
                        <template #default="d">
                            <span>{{d.row.eoCapacity||'无'}}</span>
</template>
                    </vxe-column>
                    <vxe-column field="user" title="适用车型" min-width="280" align="center">
                        <template #default="d">
                            <span v-for="it in d.row.eoApplications.split('、')" :key="it" style="margin: 0 5px;">
                                <el-tag type="warning">{{it}}</el-tag>
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column field="eoPrice" title="售价(元)" width="150" align="center">
                        <template #default="d">
                            <span>{{d.row.eoPrice||'无'}}</span>
</template>
                    </vxe-column>
                    <vxe-column field="eoOldProce" title="底价(元)" min-width="180" align="center">
                        <template #default="d">
                            <span>{{d.row.eoOldProce||'无'}}</span>
</template>
                    </vxe-column>
                    <vxe-column field="eoStock" title="库存" min-width="100" align="center">
                        <template #default="d">
                            <span>{{d.row.eoStock||'无'}}</span>
</template>
                    </vxe-column>
                    <vxe-column field="eoAddTime" title="入库时间" min-width="180" align="center">
                        <template #default="d">
                            <span>{{d.row.eoAddTime||'无'}}</span>
</template>
                    </vxe-column>
                    <vxe-column title="操作" width="120" align="center" fixed="right">
                        <template #default="scope">
                            @*<el-button type="text" size="small" v-on:click="add(scope)" disabled>编辑</el-button>*@
                            <el-button :disabled="!optor.root&&scope.row.eoOpenId!=optor.openId"
                                       v-on:click="deleteRow(scope.$index,scope.row)" type="text" size="small">
                                删除
                            </el-button>
                        </template>
                    </vxe-column>
                </vxe-table>
</div>
            <el-drawer custom-class="el-drawer-fix" size="600px" v-if="dialog" :visible.sync="dialog"
                       :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
                <div slot="title">
                    {{form.optType==0?'新增':'编辑'}}机油
                </div>
                <div v-if="dialog" class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                    <div class="flex-column-fill margin-8 hidden-x" style="padding-right:20px;">
                        <el-form size="medium" :model="form" ref="form" :rules="rules" label-position="top">

                            <el-form-item label="机油品牌" prop="eoBrand">
                                <el-input v-model="form.eoBrand" clearable placeholder="请输入机油品牌"></el-input>
                            </el-form-item>
                            <el-form-item label="机油型号" prop="eoModel">
                                <el-input v-model="form.eoModel" clearable placeholder="请输入机油型号"></el-input>
                            </el-form-item>
                            <el-form-item label="适用车型" prop="eoApplications">
                                <span slot="label">适用车型适用车型<span class="color-grey">（车型之间用、分隔，如宝马、奔驰）</span></span>
                                <el-input v-model="form.eoApplications" clearable placeholder="请输入适用车型"></el-input>
                            </el-form-item>
                            <el-form-item label="容量/L" prop="eoCapacity">
                                <el-input-number v-model="form.eoCapacity" :precision="2" :step="0.1" label="请输入容量">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="底价/元" prop="eoOldProce">
                                <el-input-number v-model="form.eoOldProce" :precision="2" :step="0.1" label="请输入底价">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="售价/元" prop="eoPrice">
                                <el-input-number v-model="form.eoPrice" :precision="2" :step="0.1" label="请输入售价">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="库存数量" prop="eoStock">
                                <el-input-number v-model="form.eoStock" label="请输入库存数量" :precision="0">
                                </el-input-number>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="padding-10 border-top-solid border-greyLight">
                        <el-button-group>
                            <el-button type="info" plain v-on:click="dialog=false" icon="fa fa-rotate-left" size="small">
                                取消
                            </el-button>
                            <el-button type="primary" icon="fa fa-check" v-on:click="submit" size="small">确 定</el-button>
                        </el-button-group>
                    </div>
                </div>
            </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'engineOil',
            props: {
                bid: {
                    type: Number,
                    'default': function () {
                        return 0;
                    }
                }
            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    tableData: [],
                    search: '',
                    query: {
                        bid: '',
                        eoApplications: '',
                        pageIndex: 1,
                        pageSize: 30,
                        rowCount: 0
                    },
                    dialog: false,
                    form: {
                        optType: 0,
                        optType: 0,
                        eoId: 0,
                        eoBrand: '',
                        eoModel: '',
                        eoApplications: '',
                        eoCapacity: '',
                        eoPrice: '',
                        eoOldProce: '',
                        eoStock: '',
                        eoImg: '',
                        openId: '',
                        state: 'engineOil'
                    },
                    eoModelList: [],
                    carList: [],
                    rules: {
                        eoBrand: [{
                            required: true,
                            message: '请输入机油品牌'
                        }],
                        eoModel: [{
                            required: true,
                            message: '请输入机油型号'
                        }],
                        eoApplications: [{
                            required: true,
                            message: '请输入适用车型'
                        }],
                        eoCapacity: [{
                            required: true,
                            message: '请输入容量'
                        }, {
                            validator: function (rule, value, callback) {
                                if (value <= 0) return callback(new Error('容量不能小于0'));
                                callback();
                            }
                        }],
                        eoOldProce: [{
                            required: true,
                            message: '请输入底价'
                        }, {
                            validator: function (rule, value, callback) {
                                if (value <= 0) return callback(new Error('底价不能小于0'));
                                callback();
                            }
                        }],
                        eoPrice: [{
                            required: true,
                            message: '请输入售价'
                        }, {
                            validator: function (rule, value, callback) {
                                if (value <= 0) return callback(new Error('售价不能小于0'));
                                callback();
                            }
                        }],
                        eoStock: [{
                            required: true,
                            message: '请输入库存数量'
                        }, {
                            validator: function (rule, value, callback) {
                                if (value <= 0) return callback(new Error('库存数量不能小于0'));
                                callback();
                            }
                        }],
                    },
                }
            },
            computed: {

            },
            watch: {
                'query.bid': {
                    handler: function (val, old) {
                        var _this = this;
                        _this.loadList();
                    },
                    immediate: true
                }
            },
            activated: function () {
                var _this = this;
                if (_this.$route) {
                    var bid = parseInt(_this.$route.query['bId']);
                    if (!isNaN(bid)) _this.query.bid = bid;
                };
            },
            mounted: function () {
                var _this = this;
                _this.visibleChange();
            },
            methods: {
                loadList: function () {
                    var _this = this, query = _this.query;
                    _this.tableData = [];
                    hxt.post({
                        url: hxt.config.link+'pc/engineOilList',
                        data: query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载列表失败：' + res.errmsg);
                            var list = res.data.list;
                            _this.query.rowCount = res.data.rowCount;
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.tableData = list;
                        }
                    });
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                
                visibleChange: function () {
                    var _this = this;
                        hxt.post({
                            url: hxt.config.link+'pc/eoModelList',
                            data: {},
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('加载列表失败：' + res.errmsg);
                                _this.eoModelList = res.data;
                            }
                        });
                    hxt.post({
                        url: hxt.config.link +'pc/getCars',
                        data: {},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载列表失败：' + res.errmsg);
                            _this.carList = res.data;
                        }
                    });
                },
                deleteRow: function (index, row) {
                    var _this = this,
                        openId = _this.optor.openId;
                    hxt.confirm('注意：删除后不能找回, 是否继续?', '提示', function () {
                        hxt.post({
                            url: hxt.config.link +'pc/engineOilAdd',
                            data: {
                                optType: 2,
                                eoId: row.eoId,
                                openId: openId,
                                state: 'engineOil'
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                hxt.success('删除成功');
                                _this.tableData.splice(index, 1);
                            }
                        });
                    });
                },
                add: function (d) {
                    var _this = this;
                    _this.form.optType = 0;
                    _this.form.optType = 0;
                    _this.form.eoId = 0;
                    _this.form.eoBrand = '';
                    _this.form.eoModel = '';
                    _this.form.eoApplications = '';
                    _this.form.eoCapacity = '';
                    _this.form.eoPrice = '';
                    _this.form.eoOldProce = '';
                    _this.form.eoStock = '';
                    _this.form.eoImg = '';
                    _this.dialog = true;
                },

                submit: function () {
                    var _this = this;
                    hxt.validateElForm(_this, "form", function () {
                        hxt.post({
                            url: hxt.config.link +'pc/engineOilAdd',
                            data: _this.form,
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                hxt.success('提交成功');
                                _this.loadList();
                                _this.dialog = false;
                            }
                        });
                    });

                },
                exportafter: function (e) {
                    var _this = this;
                    _this.$confirm('导出是否包含底价?', '提示', {
                        distinguishCancelAndClose: true,
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(function () {
                        _this.exportEcel(1);
                    }).catch(function (err) {
                        if (err === 'cancel') _this.exportEcel(0);
                    });
                },
                exportEcel: function (isOld) {
                    var _this = this;
                    var url = _this.$global.baseURL + "pc/engineOilListExport";
                    url += '?pageIndex=' + _this.query.pageIndex;
                    url += '&pageSize=' + _this.query.rowCount;
                    url += '&eoApplications=' + _this.query.eoApplications;
                    url += '&bId=' + _this.query.bId;
                    url += '&isOld=' + isOld;
                    window.open(url);
                }
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }
</style>